{% extends 'main.html' %}



{% block title %}
    <title>批量命令</title>
{% endblock %}

{% block help_box %}
<h3>选择对应主机然后输入要执行的命令</h3>
{% endblock %}

{% block content %}
 <form method="POST" id="host_list">
    <div class="col-sm-4 pull-left">
            <div class="panel panel-bordered panel-purple">
                <div class="panel-heading">
                    <h3 class="panel-title">所有主机列表</h3>
                </div>
                <div class="panel-body">
                     <table class="table">

                    <thead>
                        <div class="panel-heading">
                            <h3 class="panel-title">主机</h3>
                        </div>
                        <tr>
                            <th><input type="checkbox" onclick="choice_all(this)"></th>
                            <th>Name</th>
                            <th class="text-center">IP</th>
                        </tr>
                     </thead>
                      <tbody>
                            {% for host in request.user.host_to_remote_users.all %}
                                <tr id="host_item">
                                     <td><input type="checkbox" value="{{ host.id }}"></td>
                                     <td >{{ host }}</td>
                                     <td >{{ host.host.ip }}</td>
                                </tr>
                            {% endfor %}
                       </tbody>

                     </table>


                </div>
            </div>


        </div>



    <div class="col-sm-8 pull-right">
            <div class="panel panel-bordered panel-success">
                <div class="panel-heading">
                    <h3 class="panel-title">批量命令</h3>
                </div>
                <div class="panel-body">
                    <input type="text" class="form-control" placeholder="请输入要执行的命令" id="cmd_input">
                    <input class="btn btn-success pull-right" value="发送命令" type="button" onclick="send_task(this,'cmd')" >
                </div>
            </div>
        </div>
</form>


<div class="col-sm-8 pull-right" id="res">

</div>

<script>
    function choice_all(ths){


       var c=$('#host_item input').prop('checked');

        if(c){
            $('#host_item input').prop('checked',false);
        }else {
            $('#host_item input').prop('checked',true);
        }

    }
    function send_task(ths,type){
        var cmdcount=$('#cmd_input').val().trim().length;
        if(cmdcount == 0){
            alert('必须输入要执行的命令！！')
            return false
        }

        $(ths).attr('disabled','disabled');
        var hosts_id=[];
        var ids=$("#host_item input[type=checkbox]:checked");
        $.each(ids,function(){
            var host_id=$(this).val();
            hosts_id.push(host_id)
        });
        if (type == 'cmd'){
            var command=$('#cmd_input').val();
            data={
                'host_ids':hosts_id,
                'type':'cmd',
                'cmd':command
            };
            var host_list_count=hosts_id.length;
            if(host_list_count == 0){
                alert('必须选择要运行命令的主机');
                 $(ths).removeAttr('disabled');
                return false
            }
            $.post('/cmd/',{'data':JSON.stringify(data)},function(arg){
                var res=JSON.parse(arg);
                 $('#res').empty();
                  for(var i in res){
                  var ip=i;
                  var id=res[i][0];
                  var status=res[i][1];
                  var content=res[i][2];
                  var eml= '<div class="list-group"><a class="list-group-item active" href="#">'+ip + '-------------------'+'状态'+ status + '</a> <pre id='+id+' >' +content+ '</pre> </div>'
                  $('#res').append(eml)
                }
            function get_status(){
                var pre_eml = $('#res pre');
                var hosts_id=[]
                $.each(pre_eml,function(){
                    hosts_id.push($(this).attr('id'))
                });
                $.get('/get_status/',{'data':JSON.stringify(hosts_id)},function(arg){
                    var args=JSON.parse(arg);
                    var S=true;
                    for(var i in args){
                        var id=i;
                        var status=args[i][0];
                        var res=args[i][1];
                        var ip=args[i][2];
                        $('#'+id).html(res);
                        $('#'+id).prev().html(ip+'-------------------'+status);
                        if(status == '初始化'){
                            S=false
                        }
                    }
                    if(S){
                            $(ths).removeAttr('disabled');
                            console.log('任务全部执行完毕');
                            clearInterval(clock)
                        }
                })
            }
            var clock=setInterval(get_status,2000)
                clock.start
            })
        }
    }
</script>
{% endblock %}
